<script>

import {Articles, ArTiles, TreeHole} from "@/api/APiH/httm";

export default ({
  name: "listView",

  data() {
    return {
      total: 0,
      dialogVisible: false,
      tableData: [{}]
    }
  },
  created() {
    // 数据接口
    Articles().then((res) => {
      console.log(res)
      this.tableData = res.rows
      console.log(this.tableData)
    })
    // 删除接口
    // ArTiles().then((res) => {
    //   console.log(res)
    //   this.tableData = res.rows
    //   console.log(this.tableData)
    // })
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    // 删除
    open(row) {
      console.log(row)
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // ArTiles([row.id]).then(() => {
        //   console.log(res)
        //   console.log(this.tableData)
        // })
// 删除接口
        console.log(row)
        ArTiles([row.id]).then(res => {
          console.log(res)
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
})
</script>
<template>
  <div id="book">
    <el-table
      :data="tableData"
      border
      style="width: 94%;margin: auto;">
      <el-table-column
        type="index"
        prop="teacherId"
        label="序号"
        width="195">
      </el-table-column>
      <el-table-column
        prop="title"
        label="文章名称"
        width="364">
      </el-table-column>
      <el-table-column
        prop="author"
        label="发布人"
        width="234">
      </el-table-column>
      <el-table-column
        prop="sendTime"
        label="创建时间"
        width="260">
      </el-table-column>
      <el-table-column
        label="操作"
        width="208">
        <template slot-scope="scope">
          <el-button @click="dialogVisible = true" type="text" size="small">详情</el-button>
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="60%"
          >
            <div>
              <div class="detailTitle">{{ 11 }}</div>
              <div class="detailContent">{{ 555555 }}</div>
            </div>
          </el-dialog>
          <el-button type="text" size="small">编辑</el-button>

          <el-button @click="open(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="100"
    >
    </el-pagination>
  </div>
</template>

<style lang="scss">
#book {
  margin-top: 20px;
}

.el-table .cell {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 23px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  word-break: keep-all;
  white-space: nowrap;
}

.el-pagination {
  margin-top: 20px;
  float: right;
  margin-right: 10px;
  margin-bottom: 20px;
}

.el-dialog__title {
  line-height: 24px;
  font-size: 14px;
  color: white;
  float: left;
}

.el-dialog__header {
  padding: 12px;
  padding-bottom: 35px;
  background-color: #1892ff;
}

[data-v-062ad2c5] .el-dialog__title {
  color: #fff;
  font-size: 14px;
}

.el-dialog__headerbtn .el-dialog__close {
  color: white;
}

.detailTitle {
  color: black;
  font-size: 25px;
  font-weight: 600;
  text-align: center;
}

.detailContent {
  margin-top: 20px;
  background-color: #fafafa;
  padding: 22px;
  line-height: 28px;
  text-indent: 2em;
  margin-bottom: 18px;
  border-radius: 8px;
}
</style>
